{extend name="../template/pc/_base.html" /}
{block name="css"}
<link rel="stylesheet" href="__STATIC__/hanbang/css/about.css">
<link rel="stylesheet" href="__STATIC__/hanbang/css/animate.min.css">
<!-- 圆圈样式 -->
<link rel="stylesheet" href="__STATIC__/hanbang/css/jquery.easy-pie-chart.css">
<link rel="stylesheet" href="__STATIC__/hanbang/css/media-queries.css">
<!-- 左右滚动样式 -->
<link href="__STATIC__/hanbang/css/owl.carousel.css" rel="stylesheet">
<link href="__STATIC__/hanbang/css/owl.theme.css" rel="stylesheet">
{/block}
{block name="main"}

<!-- 公司介绍 -->
<div class="content">
    <div class="about wow bounceInLeft" data-wow-duration="2s">
        <p><span style="font-size:48px">{$cateInfo.name}</span></p>
        <em></em>
        {$cateInfo.content|default=''|html_entity_decode ?? ''}
    </div>

</div>
<!-- #公司介绍 -->

<!-- 数据分析 -->
<div class="abouttitle wow fadeInUp">多年实践优化的超精细先进流程</div>
<div class="aboutftitle wow fadeInUp">复合人才结构团队，高效沟通，精准项目规划</div>

<div class="yuan wow fadeInUp">
            <span class="wow fadeInUp chart " data-wow-duration="500ms" data-percent="-25">
                <span class="percent">01</span>
            </span>

    <span class="heng">一</span>

    <span class="wow fadeInUp chart" data-wow-duration="1000ms" data-percent="75">
                <span class="percent">02</span>
            </span>

    <span class="heng">一</span>

    <span class="wow fadeInUp chart " data-wow-duration="1500ms" data-percent="25">
                <span class="percent">03</span>
            </span>

    <span class="heng">一</span>

    <span class="wow fadeInUp chart " data-wow-duration="2000ms" data-percent="-75">
                <span class="percent">04</span>
            </span>

    <span class="yuanzi wow fadeInUp" data-wow-duration="500ms">数码</span>
    <span class="yuanzi1 wow fadeInUp" data-wow-duration="1000ms">科技</span>
    <span class="yuanzi1 wow fadeInUp" data-wow-duration="1500ms">手机</span>
    <span class="yuanzi1 wow fadeInUp" data-wow-duration="2000ms">电子商务</span>

</div>
<!-- #数据分析 -->


<!-- 左右滚动 -->
<div class="abouttitle wow fadeInUp">15年我们一路走来</div>
<div class="aboutftitle wow fadeInUp">我们正年轻</div>

<div class="licheng wow fadeInUp">
    <div id="owl-demo" class="owl-carousel">
        <div class="item">
            <div class="nianfen"><img src="" width="47" height="166"/></div>
            <div class="neirong">
                <p>
                    <br/>
                    成功开发中纺机外贸、一统家居、民生旅游等电商平台，迅速站稳电商市场。
                </p>

                <p>
                    感知互联网+
                    <br/>
                    &nbsp;
                </p>

                <p>沃噻未来从未偏离心系客户未来的轨道&hellip;&hellip;</p>

                <p>&nbsp;</p>

                <p>&nbsp;</p>
            </div>

            <span class="shuxian"></span>

            <div class="neirong1">
                <p>
                    <br/>
                    研发返利平台、一元购电商、分销系统。<br/>
                    合作工商行政管理局商标局、北京大学、环球音乐、京西重工、克劳沃集团、中国国际广告等知名国企、上市公司、500强。<br/>
                    <br/>
                    沃噻未来持续稳健发展，口碑在外
                </p>
            </div>

            <div class="nianfen1"><img src="" width="47" height="166"/></div>

        </div>


        <div class="item">
            <div class="nianfen"><img src="" width="47" height="166"/></div>
            <div class="neirong">
                <p>
                    <br/>
                    沃噻未来进军移动互联网<br/>
                    探索HTML5先进布局，开展APP业务。巩固传统互联网，并深掘移动互联网价值。<br/>
                    <br/>
                    成功布局并推出移动网站、移动电商、移动应用等服务
                </p>
            </div>

            <span class="shuxian"></span>

            <div class="neirong1">
                <p>
                    <br/>
                    沃噻未来成功签约 中国外文局、星和众工、中国电际、新合作集团、金州集团、发改委&hellip;&hellip;<br/>
                    <br/>
                    在激烈的网络博弈中，稳步前进<br/>
                    成功与清华美院建立设计资源合作关系<br/>
                    &nbsp;
                </p>
            </div>

            <div class="nianfen1"><img src="" width="47" height="166"/></div>

        </div>

    </div>

</div>
<!-- 左右滚动 -->

<!-- 第四部分 -->
<div class="fwpp">
    <div class="abouttitle wow fadeInUp">品牌服务</div>
    <div class="aboutftitle wow fadeInUp">专注的态度、专业的品质和专心的服务，100%真实案例的承诺，优势就体现在每一个环节和细节……</div>

    <div class="fwpplogo">
        <div class="fwpplogo1 wow rollIn ">
            <div>一站式服务</div>
            <p>PC端、手机站、微信、APP…… </p>
            <p>多平台无缝对接，数据同步整合，汉邦帮助您在立交桥式信息时代轻松实现全网覆盖。</p>
        </div>

        <div class="fwpplogo2 wow bounceInDown">
            <div>精准策划</div>
            <p>将思维可视化、图形化呈现，有效诠释网站效果和交互体验，更有利于理解和记忆，便于信息的传播。</p>
        </div>

        <div class="fwpplogo3 wow lightSpeedIn">
            <div>各渠道沟通</div>
            <p>只要您有需求的理由，不管您有没有想法，沃噻都和您一起：行业、定位、赢利、投入、运营分析…… 打造属于您的互联网平台。</p>
        </div>

        <div class="fwpplogo4 wow rollIn"></div>

        <div class="fwpplogo5 wow pulse"></div>

        <div class="fwpplogo6 wow bounceInRight">
            <div>一对一售后</div>
            <p>沃噻，一对一的售后，确保及时、高效，时刻为您的站点保驾护航。</p>
        </div>

        <div class="fwpplogo7 wow bounceInLeft">
            <div>服务优势</div>

        </div>

        <div class="fwpplogo8 wow flipInX">
            <div>互联网思维</div>
            <p>各行业平台的成功实例，让互联网思维开始流行……</p>
            <p>沃噻说：今天看一个行业有没有潜力，就看他离互联网有多远。</p>
        </div>

        <div class="fwpplogo9 wow wow swing"></div>

        <div class="fwpplogo10 wow shake">
            <div>创新设计</div>
            <p>以交互设计为核心，以视觉设计为亮点，汉邦未来精心定制第一个项目，强化主观感受，加强记忆效果。</p>

        </div>

        <div class="fwpplogo11 wow bounce"></div>

    </div>

</div>
<!-- #第四部分 -->
{/block}
{block name="js"}
<script src="__STATIC__/hanbang/js/jquery-1.11.0.min.js"></script>

<!-- 第一部分.动画效果显示 -->
<script src="__STATIC__/hanbang/js/wow.min.js"></script>
<script>
    var wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 0,
        mobile: true,
        live: true
    });
    wow.init();
</script>

<!-- 第二部分.圆圈 -->
<script src="__STATIC__/hanbang/js/easypiechart.js"></script>

<!-- 第三部分.左右滚动 -->
<script src="__STATIC__/hanbang/js/owl.carousel.js"></script>
<script>
    $(function () {
        $('#owl-demo').owlCarousel({
            items: 1,
            navigation: true,
            navigationText: ["<img src='__STATIC__/hanbang/images/lcleft.jpg'>", "<img src='__STATIC__/hanbang/images/lcright.jpg'>"]
        });
    });
</script>

<!-- 第四部分.动画效果显示 -->
<script>
    $(function () {
        new EasyPieChart(document.querySelectorAll(".chart")[0], {
            easing: 'easeOutBounce',
            delay: 3000,
            barColor: '#23ac38',
            trackColor: '#e8e8e8',
            scaleColor: false,
            lineWidth: 20,
            trackWidth: 20,
            size: 240,
            lineCap: 'callback',
            animate: {
                duration: 1000,
                enabled: true
            }
        });

        $('.chart').eq(0).hover(function () {
            $(this).find('canvas').remove();
            new EasyPieChart(document.querySelectorAll(".chart")[0], {
                easing: 'easeOutBounce',
                delay: 3000,
                barColor: '#23ac38',
                trackColor: '#e8e8e8',
                scaleColor: false,
                lineWidth: 20,
                trackWidth: 20,
                size: 240,
                lineCap: 'callback',
                animate: {
                    duration: 1000,
                    enabled: true
                }
            });
        }, function () {
            $(this).find('canvas').remove();
        });

        new EasyPieChart(document.querySelectorAll(".chart")[1], {
            easing: 'easeOutBounce',
            delay: 3000,
            barColor: '#23ac38',
            trackColor: '#e8e8e8',
            scaleColor: false,
            lineWidth: 20,
            trackWidth: 20,
            size: 240,
            lineCap: 'callback',
            animate: {
                duration: 1000,
                enabled: true
            }
        });

        $('.chart').eq(1).hover(function () {
            $(this).find('canvas').remove().stop();
            new EasyPieChart(document.querySelectorAll(".chart")[1], {
                easing: 'easeOutBounce',
                delay: 3000,
                barColor: '#23ac38',
                trackColor: '#e8e8e8',
                scaleColor: false,
                lineWidth: 20,
                trackWidth: 20,
                size: 240,
                lineCap: 'callback',
                animate: {
                    duration: 1000,
                    enabled: true
                }
            });
        }, function () {
            $(this).find('canvas').remove().stop();
        });

        new EasyPieChart(document.querySelectorAll(".chart")[2], {
            easing: 'easeOutBounce',
            delay: 3000,
            barColor: '#23ac38',
            trackColor: '#e8e8e8',
            scaleColor: false,
            lineWidth: 20,
            trackWidth: 20,
            size: 240,
            lineCap: 'callback',
            animate: {
                duration: 1000,
                enabled: true
            }
        });

        $('.chart').eq(2).hover(function () {
            $(this).find('canvas').remove().stop();
            new EasyPieChart(document.querySelectorAll(".chart")[2], {
                easing: 'easeOutBounce',
                delay: 3000,
                barColor: '#23ac38',
                trackColor: '#e8e8e8',
                scaleColor: false,
                lineWidth: 20,
                trackWidth: 20,
                size: 240,
                lineCap: 'callback',
                animate: {
                    duration: 1000,
                    enabled: true
                }
            });
        }, function () {
            $(this).find('canvas').remove().stop();
        });

        new EasyPieChart(document.querySelectorAll(".chart")[3], {
            easing: 'easeOutBounce',
            delay: 3000,
            barColor: '#23ac38',
            trackColor: '#e8e8e8',
            scaleColor: false,
            lineWidth: 20,
            trackWidth: 20,
            size: 240,
            lineCap: 'callback',
            animate: {
                duration: 1000,
                enabled: true
            }
        });

        $('.chart').eq(3).hover(function () {
            $(this).find('canvas').remove().stop();
            new EasyPieChart(document.querySelectorAll(".chart")[3], {
                easing: 'easeOutBounce',
                delay: 3000,
                barColor: '#23ac38',
                trackColor: '#e8e8e8',
                scaleColor: false,
                lineWidth: 20,
                trackWidth: 20,
                size: 240,
                lineCap: 'callback',
                animate: {
                    duration: 1000,
                    enabled: true
                }
            });
        }, function () {
            $(this).find('canvas').remove().stop();
        });
    });
</script>
{/block}}